<template>
    <div class="xiaopeng">
        <router-view></router-view>
    </div>
</template>
<script setup>
import Main from "@/components/Main/Main.vue";
import NavTopBar from "@/components/NavTopBar/NavTopBar.vue";
import Bottom from "@/components/Bottom/Bottom.vue";
</script>
<style lang="scss" scoped>
.xiaopeng {
    display: flex;
    flex-direction: column;
    min-height: 100vh; // 设置最小高度为视口高度
}
// 使 <NavTopBar> 和 <Main> 紧挨着
.NavTopBar,
.Main {
    flex-shrink: 0; // 防止这些元素在容器变小时缩小
}
// 使 <Bottom> 组件位于最底部
.Bottom {
    flex-grow: 1; // 占据剩余的空间
    display: flex;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
    padding: 10px; // 添加内边距
    position: fixed;
    bottom: 0;
}
</style>